<template>
    <div class="app-container">
        <el-card class="filter-container" shadow="never">
            <div style="margin-top:15px">
                <el-button style="float:right; margin-right: 15px" type="primary" @click="handleSearchList()" size="small">
                    Search
                </el-button>
            </div>
            <div style="margin-top: 15px; max-width:90%;">
                <el-form :inline="true" :model="listQuery" size="small" label-width="150px">
                    <el-form-item label="Type:" label-width="150px">
                        <el-select style="width: 203px"  v-model="listQuery.reportType" placeholder="Please enter" clearable>
                            <el-option v-for="item in reportTypeOptions" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="Reported Nickname:" label-width="150px">
                        <el-input style="width: 203px" v-model="listQuery.reportNickname"
                            placeholder="Please enter"></el-input>
                    </el-form-item>
                    <el-form-item label="Reported ID:" label-width="150px">
                        <el-input style="width: 203px" v-model="listQuery.reportID" placeholder="Please enter"></el-input>
                    </el-form-item>
                    <el-form-item label="Reporting Time:" label-width="150px">
                        <el-date-picker style="width: 260px" v-model="listQuery.reportDate" type="daterange" unlink-panels range-separator="-"
                            start-placeholder="Start Date" end-placeholder="End Date">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="Chatter Nickname:" label-width="150px">
                        <el-input style="width: 203px" v-model="listQuery.reportBindChatter"
                            placeholder="Please enter"></el-input>
                    </el-form-item>
                    <el-form-item label="Chatter CID:" label-width="150px">
                        <el-input style="width: 203px" v-model="listQuery.reportBindCID"
                            placeholder="Please enter"></el-input>
                    </el-form-item>
                    <el-form-item label="Audit Status:" label-width="150px">
                        <el-select style="width: 203px" v-model="listQuery.reportState" placeholder="Please enter" clearable>
                            <el-option v-for="item in verifyStatusOptions" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
        <div class="table-container">
            <el-table ref="returnReasonTable" :data="list" style="width: 100%;" v-loading="listLoading" border>
                <el-table-column label="Serial Number" width="140" align="center">
                    <template slot-scope="scope">{{ scope.row.serialNo }}</template>
                </el-table-column>
                <el-table-column label="Type" width="180" align="center">
                    <template slot-scope="scope">{{ scope.row.reportTypeDesc }}</template>
                </el-table-column>
                <!-- <el-table-column label="Details" width="140" align="center">
                    <template slot-scope="scope">{{ scope.row.reason }}</template>
                </el-table-column>
                <el-table-column label="Picture" width="120" align="center">
                    <img slot-scope="scope" class="image" v-if="scope.row.images !== null && scope.row.images.length > 0"
                        :src="scope.row.images[0].thumbnailUrl"  @click="handlePreview(scope.row.images)"/>
                </el-table-column> -->
                <el-table-column label="Reported Nickname" width="180" align="center">
                    <template slot-scope="scope">{{ scope.row.reportedNickName }}</template>
                </el-table-column>
                <el-table-column label="Reported ID" width="180" align="center">
                    <template slot-scope="scope">{{ scope.row.reportedId }}</template>
                </el-table-column>
                <el-table-column label="Bind Chatter Nickname" width="180" align="center">
                    <template slot-scope="scope">{{ scope.row.chatterNickName }}</template>
                </el-table-column>
                <el-table-column label="Bind Chatter CID" width="180" align="center">
                    <template slot-scope="scope">{{ scope.row.chatterId }}</template>
                </el-table-column>
                <el-table-column label="Report Nickname" width="140" align="center">
                    <span slot-scope="scope">{{ scope.row.reportNickName }}</span>
                </el-table-column>
                <el-table-column label="Report ID" width="180" align="center">
                    <span slot-scope="scope">{{ scope.row.reportId }}</span>
                </el-table-column>
                <el-table-column label="Exist Conversation" width="150" align="center">
                    <span slot-scope="scope">{{ scope.row.sessionFlag === 0 ? "否" : "是" }}</span>
                </el-table-column>
                <el-table-column label="Creation Time" width="180" align="center">
                    <template slot-scope="scope">{{ scope.row.reportTime }}</template>
                </el-table-column>
                <el-table-column label="Audit Status" width="180" align="center">
                    <span slot-scope="scope">{{ scope.row.auditStatus === 1 ? "Report Established" : scope.row.auditStatus
                        === 2 ? "Pending Approval" : "Report Not Established" }}</span>
                </el-table-column>
                <el-table-column label="Reviewer" width="150" align="center">
                    <span slot-scope="scope">{{ scope.row.auditNickName }}</span>
                </el-table-column>
                <el-table-column label="Audit Time" width="180" align="center">
                    <template slot-scope="scope">{{ scope.row.auditTime }}</template>
                </el-table-column>
                <el-table-column label="Controls" width="310px" align="center">
                    <template slot-scope="scope" v-if="scope.row.auditStatus === 2">
                        <a style="margin-left:10px; margin-right:10px;" class="operation_item"
                            @click="handleUpdate(scope.$index, scope.row, 0)">Report Established</a>
                        <a class="operation_item" @click="handleUpdate(scope.$index, scope.row, 1)">Report Not
                            Established</a>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="batch-operate-container">
        </div>
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper" :current-page.sync="listQuery.pageNum"
                :page-size="listQuery.pageSize" :page-sizes="[10]" :total="total">
            </el-pagination>
        </div>
        <el-dialog title="" :visible.sync="imgDialogVisible" width="50%" close="imgDialogVisible=fase">
            <el-carousel height="500px">
                <el-carousel-item v-for="item in preImages" :key="item">
                  <img style="height:400px align-self:center;" :zoom-rate="1.1" fit="cover" :src="item.imageUrl"/>
                </el-carousel-item>
            </el-carousel>
        </el-dialog>
    </div>
</template>
<script>
import { formatDate } from '@/utils/date';
import { fetchReportList, fetchAudit } from '@/api/reporting';
const defaultListQuery = {
    pageNum: 1,
    pageSize: 10,
    reportType: null,
    reportNickname: null,
    reportID: null,
    reportDate: null,
    reportBindChatter: null,
    reportBindCID: null,
    reportState: null
};
export default {
    name: 'returnReasonList',
    data() {
        return {
            list: null,
            total: null,
            listLoading: true,
            listQuery: Object.assign({}, defaultListQuery),
            imgDialogVisible: false,
            verifyStatusOptions: [{
                value: 99,
                label: 'All'
            }, {
                value: 2,
                label: 'Pending Approval'
            }, {
                value: 1,
                label: 'Report Established'
            }, {
                value: 3,
                label: 'Report Not Established'
             }
            ],
            reportType: ['Offensive Content', 'Scammer', 'Underage', 'Others'],
            reportTypeOptions: [{
                value: 0,
                label: 'All'
            }, {
                value: 1,
                label: 'Offensive Content'
            }, {
                value: 2,
                label: 'Scammer'
            }, {
                value: 3,
                label: 'Underage'
            }, {
                value: 4,
                label: 'Others'
            }],
            preImages:[]
        }
    },
    created() {
        this.getList();
    },
    filters: {
    },
    methods: {
        centerDialogVisible() {
            this.dialogVisible = false;
            console.log(this.selectTime)

        },
        formatCreateTime(time) {
            if (time !== null) {
                let date;
                let str = "" + time;
                if (str.indexOf("GMT") != -1) {
                    date = new Date(time);
                } else {
                    date = new Date(parseInt(str));
                }
                return formatDate(date, 'yyyy-MM-dd')
            }

        },
        handleSearchList() {
            this.listQuery.pageNum = 1;
            this.getList();
        },
        handleSizeChange(val) {
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.listQuery.pageNum = val;
            this.getList();
        },
        getList() {
            this.listLoading = true;
            const param = {
                "reportType": this.listQuery.reportType === "" ? null : this.listQuery.reportType,
                "reportedNickName": this.listQuery.reportNickname === "" ? null : this.listQuery.reportNickname,
                "reportedNickId": this.listQuery.reportID === "" ? null : this.listQuery.reportID,
                "reportStartTime": this.listQuery.reportDate === null ? null : this.formatCreateTime(this.listQuery.reportDate[0]),
                "reportEndTime": this.listQuery.reportDate === null ? null : this.formatCreateTime(this.listQuery.reportDate[1]),
                "chatterNickName": this.listQuery.reportBindChatter === "" ? null : this.listQuery.reportBindChatter,
                "chatterNickId": this.listQuery.reportBindCID === "" ? null : this.listQuery.reportBindCID,
                "auditStatus": this.listQuery.reportState === "" ? null : this.listQuery.reportState,
                "page": this.listQuery.pageNum,
                "pageSize": this.listQuery.pageSize
            };
            fetchReportList(param).then(response => {
                this.listLoading = false;
                this.list = response.data.reportList;
                this.total = response.data.total;
            });
        },
        handleUpdate(id, row, poision) {
            this.$confirm(poision === 0 ? 'Whether to pass the report?' : 'Do you refuse the report?', 'Prompt', {
                confirmButtonText: 'Confirm',
                cancelButtonText: 'Cancel',
                type: 'warning'
            }).then(() => {
                let params = {
                    "serialNo": row.serialNo,
                    "auditStatus": poision === 0 ? 1 : 3,
                    "auditUserCode":null,
                    "auditNickName":"admin"
                }
                fetchAudit(params).then(response => {
                    this.getList();
                });
            })
        },
        handlePreview(images){
            this.preImages = images;
            this.imgDialogVisible = true;
        }
    }
}
</script>
<style scoped>
.input-width {
    width: 80%;
}

.image {
    height: 50px;
    width: 50px;
    object-fit: contain
}

.operation_item {
    color: #409EFF;
    border-bottom: 1px solid #409EFF;
    padding-bottom: 2px;
}</style>
